/**************************
	签到抽奖
**************************/
$(function () {
    /****************************************************
    	接口数据
    ****************************************************/
    var data = {
        title: '人品爆发！', //中奖title，不同奖品不同title
        img: 'images/prize/3.png', //奖品图片
        name: '一袋金币', //奖品名称
        user: '唐僧', //姓名
        num: '2' //剩余次数
    }
    console.log(JSON.stringify(data, null, 2))

    /*奖品弹层*/
    Vue.component('pop-prize', {
        template: '<transition name="slide-fade"><div class="popup-prize">' +
            '<h6>{{ title }}</h6>' +
            '<div class="prize"><img :src="img" alt=""></div>' +
            '<div class="info">' +
            '	<ul>' +
            '		<li>恭喜你获得</li>' +
            '		<li>{{ name }}</li>' +
            '	</ul>' +
            '	<div class="flex justify-content-sb btn">' +
            '		<a href="javascript:void(0)" @click="close">我知道了</a>' +
            '		<a href="javascript:void(0)" @click="share">分享给好友</a>' +
            '	</div>' +
            '</div>' +
            '</div></transition>',
        props: ['title', 'img', 'name'],
        methods: {
            close: function () {
                this.$parent.maskShow = false;
                this.$parent.popShow = false;
            },
            share: function () {
                this.$parent.maskShow = false;
                this.$parent.popShow = false;
            }
        }
    })

    /*剩余次数*/
    Vue.component('remainder', {
        template: '<div>剩余<span>{{ num }}次</span>抽奖机会</div>',
        props: ['num']
    })

    /*大转盘下提示信息*/
    Vue.component('message', {
        template: '<div>' +
            '	<i class="icon"></i>恭喜<span class="name">{{ name }}</span>抽中{{ prize }}' +
            '</div>',
        props: ['name', 'prize']
    })

    //遮罩
    Vue.component('act-mask', {
        template: '<div class="actMask" @touchmove.prevent></div>'
    })

    //加载中
    Vue.component('act-loading', {
        template: '<transition name="fade"><div class="dialog-mask-white" @touchmove.prevent><div class="m-loading"><i class="loading-icon"></i><span>{{ info }}</span></div></div></transition>',
        props: ['info']
    });

    var app = new Vue({
        el: "#app",
        data: {
            maskShow: false, //遮罩层 显示
            loadingShow: false, //loading 显示
            loadingInfo: 'loading...',
            popShow: false, //中奖弹窗
            messageShow: false, //大转盘下提示信息
            prizeTitle: '', //中奖标题
            prizeImg: '', //中奖图片
            prizeName: data.name, //中奖名称
            userName: data.user, //用户姓名
            remainder: data.num //剩余次数
        }
    })

    /****************************************************
    	大转盘
    ****************************************************/
    var wheelSurf;
    // 初始化装盘数据 正常情况下应该由后台返回
    var initData = {
        "success": true,
        "list": [
            {
                "id": 100,
                "name1": "2",
                "name2": "金币",
                "image": "./images/prize/min_1.png",
                "rank": 1,
                "percent": 1
				},
            {
                "id": 101,
                "name1": "50",
                "name2": "金币",
                "image": "./images/prize/min_2.png",
                "rank": 2,
                "percent": 5
				},
            {
                "id": 102,
                "name1": "50",
                "name2": "优惠券",
                "image": "./images/prize/min_3.png",
                "rank": 3,
                "percent": 80
				},
            {
                "id": 103,
                "name1": "80",
                "name2": "金币",
                "image": "./images/prize/min_4.png",
                "rank": 4,
                "percent": 49
				},
            {
                "id": 104,
                "name1": "100",
                "name2": "优惠券",
                "image": "./images/prize/min_5.png",
                "rank": 5,
                "percent": 30
				},
            {
                "id": 105,
                "name1": "30",
                "name2": "好豆",
                "image": "./images/prize/min_6.png",
                "rank": 6,
                "percent": 1
				},
            {
                "id": 106,
                "name1": "200",
                "name2": "优惠券",
                "image": "./images/prize/min_7.png",
                "rank": 7,
                "percent": 10
				},
            {
                "id": 107,
                "name1": "100",
                "name2": "金币",
                "image": "./images/prize/min_7.png",
                "rank": 8,
                "percent": 11
				}
            ]
    }

    // 计算分配获奖概率(前提所有奖品概率相加100%)
    function getGift() {
        var percent = Math.random() * 100
        var totalPercent = 0
        for (var i = 0, l = initData.list.length; i < l; i++) {
            totalPercent += initData.list[i].percent
            if (percent <= totalPercent) {
                return initData.list[i]
            }
        }
    }
    var list = {}
    var angel = 360 / initData.list.length
        // 格式化成插件需要的奖品列表格式
    for (var i = 0, l = initData.list.length; i < l; i++) {
        list[initData.list[i].rank] = {
            id: initData.list[i].id,
            name1: initData.list[i].name1,
            name2: initData.list[i].name2,
            image: initData.list[i].image
        }
    }

    // 定义转盘奖品
    wheelSurf = $('#myCanvas').WheelSurf({
        list: list, // 奖品 列表，(必填)
        outerCircle: {
            color: '#ffedcf' // 外圈颜色(可选)
        },
        innerCircle: {
            color: '#f4ad26' // 里圈颜色(可选)
        },
        dots: ['#ffedcf', '#ffedcf'], // 装饰点颜色(可选)
        disk: ['#ffe790', '#ffd375', '#ffe790', '#ffd375', '#ffe790', '#ffd375', '#ffe790', '#ffd375', '#ffe790'], //中心奖盘的颜色，默认7彩(可选)
    })

    // 初始化转盘
    wheelSurf.init();

    // 抽奖
    var throttle = true;
    $("#start").on('click', function () {
        if (app.remainder > 0) {
            var winData = getGift() // 正常情况下获奖信息应该由后台返回
            console.log(winData)
            if (!throttle) {
                return false;
            }
            throttle = false;
            var count = 0
                // 计算奖品角度
            for (var key in list) {
                if (list.hasOwnProperty(key)) {
                    if (winData.id == list[key].id) {
                        break;
                    }
                    count++
                }
            }
            //抽奖之后剩余次数-1
            app.remainder = app.remainder - 1;
            // 转盘抽奖，
            wheelSurf.lottery((count * angel + angel / 2), function () {
                //抽奖结果
                app.messageShow = true; //页面中提示中奖
                app.maskShow = true; //开启遮罩
                app.popShow = true; //弹层
                app.prizeTitle = data.title; //设置弹层中 title
                app.prizeImg = data.img; //设置弹层中 img
                app.prizeName = data.name; //设置弹层中 奖品名
                throttle = true;
            })
        }
    })
})